<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        #div1{
            width: 300px;
            height: 300px;
            background-color: red;
        }
    </style>

</head>
<body>
   
    <!-- 1.按钮和DIV的单击事件（三种绑定方式） -->
             <button type="button" id="1" onclick="aa()" >按钮1</button>
             <button type="button" id="2" >按钮2</button>
             <button type="button" id="bu3"  >按钮3</button>
      

<!-- . 300px*300px的DIV 进入事件，离开事件，移动事件（三种绑定方式） -->
                 <div id="div1"  onmouseenter="cc()"; " ></div>
         

<!-- 3.登入页面
用户名输入框，
密码输入框，
提交按钮  -->
                用户名 <input type="text" id="usermane"onfocus="ll()"； onblur="pp()"  ><br>
                密码<input type="password" id="psw" onfocus="ty()"； onblur="cp()" ><br>
                <button type="button" onclick="tijiao()">提交</button>

<!-- 任务   3.1 用户名框获取焦点事件，控制台输出：用户在输入名称
         3.2  用户名框失去焦点事件，判断是否有输入文字，没有则alert没有输入用户名
         3.3  密码框获取焦点事件，控制台输出：用户在输入密码
         3.4  密码框失去焦点事件，判断是否有输入文字，没有则alert没有输入密码
         3.5 点击提交按钮，判断用户和密码是否为空。用户名为空，提示‘用户名为空’；
              密码为空，提示‘密码为空’；均为空，则提示‘用户名和密码为空’

4.实现DIV 鼠标移动事件，采用监听器方式操作，可实现添加和清除监听器功能。
     -->
                  
     <div id="div_mod" style="height: 300px;width: 300px;border: 1px solid blue;"></div>
     <button type="button" onclick="add()">添加监听器</button>
		<button type="button" onclick="remove()">移除监听器</button>
</body>
       <script>
           function aa(){
             alert("按钮1")
           }
          
        document.getElementById(2).onclick=function(){
            alert("按钮2")
        }
        function bb(){
            alert("按钮3")
        }
        document.getElementById('bu3').addEventListener('dblclick',bb)
        // 分割====================================================================================================
        function cc(){
            console.log("我进来了")
        }
        document.getElementById('div1').onmouseleave=function(){
            console.log("我出去了")
        }
        function ab(){
            console.log("别摸我")
        }
        document.getElementById('div1').addEventListener(onmousemove,ab)
         // 分割====================================================================================================
         function ll(){
             console.log("用户正在输入")
         }
            function pp(){
                var kon = document.getElementById('usermane')
		    if(kon.value == ''){
			 	alert('用户名不能为空');
			 	return;
			 }else{ alert('测试'); }

            }
            function ty(){
              console.log("用户正在输入密码")
            }
            function cp(){
                var kon1=document.getElementById('psw')
                if(kon1.value == ''){
                    alert('用户名不能为空');
			 	return;
                }
            }
            
            function tijiao(){
                var kon = document.getElementById('usermane')
                var kon1=document.getElementById('psw')
                if (kon.value =='' && kon1.value=='') {
                    alert('账号和密码都为空')
                    return
                }
                if (kon.value =='') {
                    alert('账号为空')
                }
                if (kon1.value=='') {
                    alert('密码为空')
                }
            }




            function temp(){
			console.log('鼠标正在移动')
		}
		function add(){
			document.getElementById('div_mod').addEventListener('mousemove',temp)
			alert('监听器添加成功')
		}
		function remove(){
			document.getElementById('div_mod').removeEventListener('mousemove',temp)
			alert('监听器移除成功')
		}
			 
       </script>
</html>